<template>
	<view>
		<view class="list-parent">
			<view @click="handleJump(1)" class="list-box">
				<u-icon size="100rpx" color="green" name="edit-pen"></u-icon>
				<view style="margin-left: 20rpx">
					<view class="list-title">在线预约</view>
					<view class="list-content">业务大厅排队叫号在线预约</view>
				</view>
			</view>
			<view @click="handleJump(2)" class="list-box">
				<u-icon size="100rpx" color="orange" name="clock"></u-icon>
				<view style="margin-left: 20rpx">
					<view class="list-title">我的预约</view>
					<view class="list-content">在线查询您的预约记录</view>
				</view>
			</view>
			<view @click="handleJump(3)" class="list-box">
				<u-icon size="100rpx" color="#409eff" name="account"></u-icon>
				<view style="margin-left: 20rpx">
					<view class="list-title">个人中心</view>
					<view class="list-content">查看您的各项信息</view>
				</view>
			</view>
		</view>
		<u-popup :show="errshow" mode="center" round="4">
			<view class="popup-content-tip">
				<view class="title">预约提示</view>
				<view class="text">
					<scroll-view style="height: 100%; padding: 16rpx 0rpx 16rpx 16rpx; box-sizing: border-box" :scroll-y="true">
						<view style="font-size: 36rpx; color: red">{{ errtip }}</view>
					</scroll-view>
				</view>
				<view class="btn-box">
					<button size="mini" type="primary" @click="closeTip">确认</button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="revertionshow" mode="center" round="8">
			<view class="popup-content">
				<view class="title">预约须知</view>
				<view class="text">
					<scroll-view style="height: 100%; padding: 16rpx 0rpx 16rpx 16rpx; box-sizing: border-box" :scroll-y="true">
						<view v-html="userNoticeText"></view>
					</scroll-view>
				</view>
				<view class="btn-box">
					<button size="mini" :disabled="timeVlue !== '确认'" type="primary" @click="handleJumpResvertion">{{ timeVlue }}</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { wxCodeGetUserInfo, reservationYorN, reservationNotice } from '../utils/methods.js';
export default {
	onShareAppMessage(res) {
		return {
			title: '石家庄不动产中心',
			path: '/pages/index'
		};
	},
	data() {
		return {
			revertionshow: false, // 预约须知弹框
			errshow: false, // 不可以预约的错误弹框
			timeVlue: '确认',
			userNoticeText: '', // 预约须知
			errtip: '' //不可预约提示
		};
	},
	methods: {
		handleWxCode() {
			uni.login({
				provider: 'weixin', //使用微信登录
				success: (loginRes) => {
					wxCodeGetUserInfo({ code: loginRes.code }).then((Info) => {
						if (Info.data.code == 0) {
							uni.setStorageSync('userTokenStr', Info.data.data.token);
							uni.setStorageSync('idCard', Info.data.data.idcard);
							uni.setStorageSync('type', Info.data.data.type);
							uni.setStorageSync('typeName', Info.data.data.typeName);
							// uni.reLaunch({ url: '/pages/register' });
							if (!Info.data.data.phone || Info.data.data.phone == 'null') {
								uni.reLaunch({ url: '/pages/register' });
							}
						}
					});
				},
				fail: (err) => {
					console.log(err, 'EEEERRRR');
				}
			});
		},

		handleJumpResvertion() {
			this.revertionshow = false;
			// 选择业务页面
			uni.navigateTo({ url: '/pages/select_business' });
		},
		handleJump(index) {
			if (index === 1) {
				reservationYorN().then((res) => {
					if (res.data.code === 0) {
						reservationNotice().then((res) => {
							if (res.data.code === 0) {
								this.userNoticeText = res.data.data.html;
								if (res.data.data.time > 0) {
									this.timeVlue = '确认' + String(res.data.data.time);
									this.handleStimeOutTimeValue(res.data.data.time);
								}
								this.revertionshow = true;
							}
						});
					}
					if (res.data.code === 500) {
						this.errtip = res.data.msg;
						this.errshow = true;
					}
				});
			}
			if (index === 2) {
				// 进入我的预约页面
				uni.navigateTo({ url: '/pages/appointment' });
			}
			if (index === 3) {
				// 进入个人中心页面
				uni.navigateTo({ url: '/pages/personal' });
			}
		},
		closeTip() {
			this.errtip = '';
			this.errshow = false;
		},
		handleStimeOutTimeValue(time) {
			let timeCopy = time;

			let timer = setInterval(() => {
				if (timeCopy === 0) {
					clearInterval(timer);
					this.timeVlue = '确认';
				} else {
					this.timeVlue = '确认' + String(timeCopy);
					timeCopy--;
				}
			}, 1000);
		}
	},
	mounted() {
		this.handleWxCode();
		// login()

		// 跳转至注册页面
		// uni.reLaunch({url: '/pages/register'})
	}
};
</script>

<style lang="less">
.list-parent {
	box-sizing: border-box;
	padding: 40rpx;
	.list-box {
		box-sizing: border-box;
		padding: 40rpx;
		border-radius: 20rpx;
		border: 1px solid #f3f3f3;
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		.list-title {
			font-size: 40rpx;
			font-weight: 800;
			margin: 0rpx 0rpx 10rpx 0rpx;
		}
		// .list-content
	}
}
.popup-content-tip {
	width: 600rpx;
	height: 500rpx;
	overflow: hidden;
	.title {
		height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		font-weight: 800;
		padding: 12rpx;
		border-bottom: 1px solid #f3f3f3;
		box-sizing: border-box;
	}
	.text {
		height: 300rpx;
		padding: 40rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f3f3f3;
	}
	.btn-box {
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		padding: 20rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.popup-content {
	width: 600rpx;
	height: 900rpx;
	overflow: hidden;
	.title {
		height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		font-weight: 800;
		padding: 12rpx;
		border-bottom: 1px solid #f3f3f3;
		box-sizing: border-box;
	}
	.text {
		height: 700rpx;
		padding: 40rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f3f3f3;
	}
	.btn-box {
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		padding: 20rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
</style>
